/**
 * 首页视图组件
 */
class HomeView {
    constructor(route) {
        this.route = route;
        this.title = route.title || '首页';
    }
    
    /**
     * 渲染页面内容
     */
    async render() {
        return `
            <div class="layui-fluid content-wrapper">
                <div class="content-header">
                    <h2>首页</h2>
                </div>
                
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">快捷入口</div>
                            <div class="layui-card-body">
                                <div class="layui-btn-container">
                                    <button type="button" class="layui-btn" onclick="window.router.navigate('/charts')">图表测试</button>
                                    <button type="button" class="layui-btn layui-btn-normal" onclick="window.router.navigate('/links')">链接信息</button>
                                    <button type="button" class="layui-btn layui-btn-warm" onclick="window.router.navigate('/stats/day')">按天统计</button>
                                    <button type="button" class="layui-btn layui-btn-danger" onclick="window.router.navigate('/stats/process')">进程统计</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">系统信息</div>
                            <div class="layui-card-body">
                                <table class="layui-table" lay-skin="line">
                                    <colgroup>
                                        <col width="120">
                                        <col>
                                    </colgroup>
                                    <tbody>
                                        <tr>
                                            <td>系统版本</td>
                                            <td>v1.0.0</td>
                                        </tr>
                                        <tr>
                                            <td>服务器环境</td>
                                            <td>Go/Gin</td>
                                        </tr>
                                        <tr>
                                            <td>UI框架</td>
                                            <td>LayUI 2.11.6</td>
                                        </tr>
                                        <tr>
                                            <td>应用模式</td>
                                            <td>单页面应用</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md3">
                        <div class="stat-card">
                            <div class="stat-number">1,234</div>
                            <div class="stat-label">总连接数</div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="stat-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                            <div class="stat-number">567</div>
                            <div class="stat-label">活跃进程</div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="stat-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                            <div class="stat-number">89.2%</div>
                            <div class="stat-label">CPU使用率</div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="stat-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                            <div class="stat-number">12.5GB</div>
                            <div class="stat-label">内存使用</div>
                        </div>
                    </div>
                </div>
                
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">最近活动</div>
                            <div class="layui-card-body">
                                <table class="layui-table">
                                    <thead>
                                        <tr>
                                            <th>时间</th>
                                            <th>类型</th>
                                            <th>描述</th>
                                            <th>状态</th>
                                        </tr>
                                    </thead>
                                    <tbody id="recent-activities">
                                        <!-- 动态加载的活动数据 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
    
    /**
     * 初始化组件
     */
    async init() {
        console.log('首页组件初始化');
        
        // 加载最近活动数据
        this.loadRecentActivities();
        
        // 初始化统计卡片动画
        this.initStatCards();
        
        // 使用LayUI渲染组件
        if (typeof layui !== 'undefined') {
            layui.use(['element', 'layer'], function() {
                var element = layui.element;
                var layer = layui.layer;
                
                // 渲染元素
                element.render();
                
                // 添加一些交互效果
                $('.stat-card').hover(
                    function() {
                        $(this).css('transform', 'translateY(-5px)');
                    },
                    function() {
                        $(this).css('transform', 'translateY(0)');
                    }
                );
            });
        }
    }
    
    /**
     * 加载最近活动数据
     */
    loadRecentActivities() {
        const activities = [
            {
                time: '2024-01-15 14:30:25',
                type: '系统',
                description: '用户登录成功',
                status: 'success'
            },
            {
                time: '2024-01-15 14:25:10',
                type: '网络',
                description: '检测到新的连接请求',
                status: 'info'
            },
            {
                time: '2024-01-15 14:20:45',
                type: '进程',
                description: '进程mihomo重启完成',
                status: 'warning'
            },
            {
                time: '2024-01-15 14:15:30',
                type: '配置',
                description: '配置文件已更新',
                status: 'success'
            },
            {
                time: '2024-01-15 14:10:15',
                type: '监控',
                description: 'CPU使用率超过阈值',
                status: 'danger'
            }
        ];
        
        const tbody = document.getElementById('recent-activities');
        if (tbody) {
            tbody.innerHTML = activities.map(activity => `
                <tr>
                    <td>${activity.time}</td>
                    <td><span class="layui-badge layui-bg-blue">${activity.type}</span></td>
                    <td>${activity.description}</td>
                    <td>${this.getStatusBadge(activity.status)}</td>
                </tr>
            `).join('');
        }
    }
    
    /**
     * 获取状态标签
     */
    getStatusBadge(status) {
        const badges = {
            success: '<span class="layui-badge layui-bg-green">成功</span>',
            info: '<span class="layui-badge layui-bg-blue">信息</span>',
            warning: '<span class="layui-badge">警告</span>',
            danger: '<span class="layui-badge layui-bg-red">错误</span>'
        };
        return badges[status] || '<span class="layui-badge">未知</span>';
    }
    
    /**
     * 初始化统计卡片动画
     */
    initStatCards() {
        const statNumbers = document.querySelectorAll('.stat-number');
        
        statNumbers.forEach((element, index) => {
            setTimeout(() => {
                element.style.opacity = '0';
                element.style.transform = 'translateY(20px)';
                element.style.transition = 'all 0.5s ease';
                
                setTimeout(() => {
                    element.style.opacity = '1';
                    element.style.transform = 'translateY(0)';
                }, 100);
            }, index * 200);
        });
    }
    
    /**
     * 清理资源
     */
    destroy() {
        console.log('首页组件销毁');
        
        // 清理事件监听
        $('.stat-card').off('hover');
        
        // 清理定时器
        if (this.refreshTimer) {
            clearInterval(this.refreshTimer);
        }
    }
}

// 注册到全局视图组件
if (!window.ViewComponents) {
    window.ViewComponents = {};
}
window.ViewComponents.home = HomeView;